<template>
  <el-form
    size="mini"
    :model="userFormData"
    status-icon
    :rules="rules"
    ref="userFormRef"
    label-width="90px"
  >
    <el-form-item label="姓名" prop="realname">
      <el-input type="text" v-model="userFormData.realname" autocomplete="off"></el-input>
      <span class="el-icon-warning-outline tip" v-if="!errorFields.includes('realname')">
        姓名为身份证中的名称--{{ userid }}</span
      >
    </el-form-item>
    <el-form-item label="账号" prop="username">
      <el-input type="text" readonly v-model="userFormData.username" autocomplete="off"></el-input>
      <span class="el-icon-warning-outline tip" v-if="!errorFields.includes('username')">
        账号是不能被修改的</span
      >
    </el-form-item>
    <el-form-item label="修改密码" prop="password">
      <el-checkbox v-model="ispass" />
      <br />
      <el-input
        type="text"
        v-if="ispass"
        v-model="userFormData.password"
        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-radio-group v-model="userFormData.sex">
        <el-radio label="1">先生</el-radio>
        <el-radio label="2">女士</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="手机" prop="phone">
      <el-input type="text" v-model="userFormData.phone" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="生日" prop="birthday">
      <el-date-picker
        type="date"
        placeholder="选择日期"
        value-format="yyyy-MM-dd"
        v-model="userFormData.birthday"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('userFormRef')">提交</el-button>
      <el-button @click="resetForm('userFormRef')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { editUserIdToInfoApi, getUserIdToInfoApi } from '@/api/userApi'
import { addUserRulesMixin } from '../mixin'
export default {
  mixins: [addUserRulesMixin],
  props: ['setDialogVisible', 'userid'],
  data() {
    return {
      ispass: false,
      userFormData: {
        realname: '',
        username: '',
        password: '',
        sex: '',
        phone: '',
        birthday: '',
        avatar: ''
      }
    }
  },
  watch: {
    ispass(value) {
      !value && (this.userFormData.password = '')
    }
  },
  mounted() {
    this.loadUserData()
  },
  methods: {
    // 根据用户id，返回对应的记录数据
    async loadUserData() {
      let ret = await getUserIdToInfoApi(this.userid)
      if (ret.code === 0) {
        for (let key in ret.data) {
          if (this.userFormData[key] !== undefined) {
            this.userFormData[key] = ret.data[key]
          }
        }
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid, errors) => {
        this.errorFields = Object.keys(errors)
        if (valid) {
          // 发送网络请求给后端接口
          // 深复制
          let userData = { ...this.userFormData }
          // 为真有修改密码
          if (!this.ispass) {
            delete userData.password
          }
          let ret = await editUserIdToInfoApi(this.userid, userData)
          // 新增用户成功
          if (ret.code === 0) {
            this.$message({
              message: '修改用户成功！',
              type: 'success',
              showClose: true,
              duration: 3000,
              onClose: () => {
                this.resetForm(formName)
                this.setDialogVisible(false, 0)
              }
            })
          } else {
            // 提示一下
            this.$message({
              message: '修改用户失败，请认真检查填写的内容！',
              type: 'error',
              duration: 3000
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.tip {
  color: #c0c4cc;
  font-size: 12px;
}
</style>
